<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>

</head>

<body>
    <!-- 
        事件：就是用户和浏览器之间的交互行为
            比如：点击按钮、鼠标移动、关闭窗口。。。
     -->
     <!-- 第一种方法：这种写法称为：结构和行为耦合，不方便维护，不推荐使用 -->
    <!-- <button id="btn" ondblclick="alert('讨厌')">我是一个button</button> -->
    
    <!-- 可以为按钮的对应事件绑定处理函数的形式来响应事件 -->
    <button id="btn">我是一个button</button>


</body>

<script type="text/javascript">
    /**
     * 1.获取对象
     * 2.为对象绑定事件
     * 
     */

    var btn = document.getElementById("btn");
    console.log(btn.innerHTML);

    // 绑定一个单击事件
    btn.onclick = function cute(params) {
        alert("你还点！");
    }
    // 绑定一个双击事件
    btn.ondblclick = function dblClick(params) {
        alert("双击！")
    }

</script>

</html>